<template>
  <div class="chest-pain-chart">
    <div ref="chart" class="chart" />
    <i class="el-icon-zoom-in chart-icon" @click="clickIcon" />
    <el-dialog
      :visible.sync="dialogVisible"
      :title="getTitle"
      width="70%"
      top="10px"
    >
      <div class="dialog-content">
        <div class="dialog-content-zuo" @click="clickZuo">
          <img src="../../images/dashboard/zuohua.png" alt="" />
        </div>
        <div class="dialog-content-header">
          <el-form :inline="true" class="demo-form-inline" label-width="80px">
            <!-- <el-form-item label="计算方式">
              <el-input
                v-model="formInline.dispatchId"
                placeholder="计算方式"
              />
            </el-form-item> -->
            <el-form-item label="统计周期">
              <el-date-picker
                v-model="formInline.month"
                type="month"
                value-format="MM"
                clearable
                placeholder="选择月"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              ><el-button type="primary" @click="getSdcQuotaOverall()"
                >搜索</el-button
              ></el-form-item
            >
            <el-form-item
              ><el-button type="primary" @click="onPrint"
                >导出</el-button
              ></el-form-item
            >
          </el-form>
        </div>
        <div id="dialogContent">
          <div ref="dialogChart" class="dialog-content-chart" />
          <div class="title">指标详情</div>
          <el-table :data="detailslList" border @row-click="onRowClick">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              align="center"
              v-for="item in detailsColumn"
              :key="item.prop"
            />
          </el-table>
          <div class="title">统计明细</div>
          <el-table :data="particularslList" border>
            <el-table-column
              type="index"
              width="50"
              label="序号"
              align="center"
            />
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              align="center"
              v-for="item in particularsColumn"
              :key="item.prop"
            >
              <template slot-scope="scope">
                <span
                  v-if="item.prop == 'diffMinute'"
                  :class="{ isRed: scope.row.isAbnormal == 1 }"
                  >{{ scope.row.diffMinute }}</span
                >
                <span
                  v-else-if="item.prop == 'isReach'"
                  :class="{ isRed: scope.row.isReach != 1 }"
                  >{{ scope.row.isReach == 1 ? "是" : "否" }}</span
                >
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="dialog-content-you" @click="clickYou">
          <img src="../../images/dashboard/youhua.png" alt="" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import echarts from "echarts";
import { htmlToPDF } from "@/utils/htmlToPdf.js";
import {
  getSdcQuotaOverall,
  getSdcQuotaPatientList,
} from "@/api/follow-up/chest-pain";
export default {
  name: "QualityChart",
  props: {
    chartData: {
      type: Object,
      default: null,
    },
    singleChartData: {
      type: Object,
      default: null,
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    getTitle() {
      return this.chartIndex + 1 + "、" + this.singleChartData.name;
    },
  },
  data() {
    return {
      dialogVisible: false,
      chartIndex: 0,
      sigleChart: null,
      formInline: {},
      detailslList: [],
      particularslList: [],
      // 时间表头
      timeDetailsColumn: [
        {
          prop: "timeName",
          label: "月份",
        },
        {
          prop: "avgQuotaMinute",
          label: "平均值",
        },
        {
          prop: "maxQuotaMinute",
          label: "最大值",
        },
        {
          prop: "minQuotaMinute",
          label: "最小值",
        },
        {
          prop: "countQuota",
          label: "纳入统计数量",
        },
      ],
      timeParticularsColumn: [
        {
          prop: "name",
          label: "患者姓名",
        },
        {
          prop: "quotaTime1",
          label: "首次医疗接触时间",
        },
        {
          prop: "quotaTime2",
          label: "首份心电图时间",
        },
        {
          prop: "diffMinute",
          label: "时间差",
        },
      ],
      // 比例表头
      scaleDetailsColumn: [
        {
          prop: "timeName",
          label: "月份",
        },
        {
          prop: "ratioReach",
          label: "百分比",
        },
        {
          prop: "countReach",
          label: "达标数量",
        },
        {
          prop: "countNotReach",
          label: "未达标数量",
        },
        {
          prop: "countQuota",
          label: "纳入统计数量",
        },
      ],
      scaleParticularsColumn: [
        {
          prop: "name",
          label: "患者姓名",
        },
        {
          prop: "patientId",
          label: "患者ID",
        },
        {
          prop: "isReach",
          label: "是否达标",
        },
      ],

      detailsColumn: [
        {
          prop: "timeName",
          label: "月份",
        },
        {
          prop: "avgQuotaMinute",
          label: "平均值",
        },
        {
          prop: "maxQuotaMinute",
          label: "最大值",
        },
        {
          prop: "minQuotaMinute",
          label: "最小值",
        },
        {
          prop: "countQuota",
          label: "纳入统计数量",
        },
      ],
      particularsColumn: [
        {
          prop: "name",
          label: "患者姓名",
        },
        {
          prop: "quotaTime1",
          label: "首次医疗接触时间",
        },
        {
          prop: "quotaTime2",
          label: "首份心电图时间",
        },
        {
          prop: "diffMinute",
          label: "时间差",
        },
      ],
    };
  },
  mounted() {
    this.getChart();
  },
  methods: {
    getChart() {
      const chartLine = this.$refs.chart;
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 50,
          bottom: 0,
          data: [
            {
              name: "指标值",
              icon: "rect",
            },
          ],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#F3F3F9",
              },
            },
            axisLabel: {
              color: "#666666",
            },
            data: this.chartData.timeData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.chartData.unit,
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: ["#F3F3F9"],
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "指标值",
            barWidth: 20,
            type: "bar",
            itemStyle: {
              color: "#4380EA",
            },
            data: this.chartData.targetData,
          },
        ],
      };
      if (chartLine) {
        const myChart = echarts.init(chartLine);
        myChart.setOption(option);
      }
    },
    getSigleChart() {
      const chartLine = this.$refs.dialogChart;
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          itemWidth: 18,
          itemHeight: 10,
          itemGap: 50,
          bottom: 0,
          data: [
            {
              name: "指标值",
              icon: "rect",
            },
          ],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#F3F3F9",
              },
            },
            axisLabel: {
              color: "#666666",
            },
            data: this.singleChartData.optionData.timeData,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.chartData.unit,
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: ["#F3F3F9"],
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "指标值",
            type: "bar",
            itemStyle: {
              color: "#4380EA",
            },
            barWidth: 20,
            data: this.singleChartData.optionData.targetData,
          },
        ],
      };
      if (chartLine) {
        this.sigleChart = echarts.init(chartLine);
        this.sigleChart.setOption(option);
        this.sigleChart.on("click", (params) => {
          this.onRowClick({ timeName: params.name });
        });
      }
    },
    clickIcon() {
      this.dialogVisible = true;
      this.chartIndex = this.index;
      this.$emit("clickIcon", this.chartIndex);
      this.$nextTick(() => {
        this.getSigleChart();
        this.getSdcQuotaOverall();
      });
    },
    clickZuo() {
      this.$emit("clickZuo", this.chartIndex);
      this.$nextTick(() => {
        this.chartIndex = this.singleChartData.index;
        this.getSigleChart();
        this.getSdcQuotaOverall();
      });
    },
    clickYou() {
      console.log(this.chartIndex);
      this.$emit("clickYou", this.chartIndex);
      this.$nextTick(() => {
        this.chartIndex = this.singleChartData.index;
        this.getSigleChart();
        this.getSdcQuotaOverall();
      });
    },

    async onRowClick(row) {
      const result = await getSdcQuotaPatientList({
        index: this.chartIndex + 1,
        timeName: row.timeName,
      });
      this.particularslList = result.data.list;
    },
    // 指标详情
    async getSdcQuotaOverall() {
      const result = await getSdcQuotaOverall({
        index: this.chartIndex + 1,
        ...this.formInline,
      });
      if (result.data.type == 1) {
        this.detailsColumn = this.timeDetailsColumn;
        this.particularsColumn = this.timeParticularsColumn;
      } else {
        this.detailsColumn = this.scaleDetailsColumn;
        this.particularsColumn = this.scaleParticularsColumn;
      }
      this.detailslList = result.data.list;
      this.particularslList = [];
    },
    onPrint() {
      htmlToPDF("dialogContent", this.getTitle);
    },
  },
};
</script>

<style lang="less">
.chest-pain-chart {
  width: 100%;
  height: 100%;
  position: relative;
  .chart {
    width: 100%;
    height: 400px;
  }
  .chart-icon {
    z-index: 999;
    cursor: pointer;
    font-size: 20px;
    color: #54647d;
    position: absolute;
    bottom: 5px;
    right: 30px;
  }
  .el-dialog__body {
    // height: 600px;
  }
  .dialog-content {
    width: 100%;
    height: 100%;
    padding: 0 25px;
    &-zuo {
      cursor: pointer;
      z-index: 999;
      position: absolute;
      left: 40px;
      top: 300px;
    }
    &-you {
      cursor: pointer;
      z-index: 999;
      position: absolute;
      right: 40px;
      top: 300px;
    }
    &-header {
      color: #333333;
      font-size: 24px;
      text-align: center;
      line-height: 24px;
    }
    &-chart {
      width: 100%;
      height: 400px;
    }
  }
}
</style>

<style lang="less" scoped>
.dialog-content-header {
  text-align: left !important;
}
.title {
  margin: 10px 0;
  font-weight: 700;
}
.isRed {
  color: red;
}
#dialogContent {
  padding: 20px;
}
</style>


